<template>
  <div>
    <br>

    <div id="searchDiv">
    <!--      模糊查询-->
    <div>
      <el-input v-model="productName" clearable @clear="getRepertory(false)" placeholder="请输入商品名字"></el-input>
    </div>
    <!--    模糊查询按钮-->
    <div id="searchBtn">
      <el-button type="primary" @click="getRepertory">查询</el-button>
    </div>
    </div>

    <!--    新增采购计划按钮-->
    <div id="addPurchase" style="margin-top: -18px">
        <el-button type="primary" @click="purchase()">采购计划</el-button>
    </div>

    <!--    内容部分-->
    <el-table :data="RepertoryList"  border style="width: 100%;text-align: center;font-weight: bold;margin-top: 40px;border-left: none">
      <el-table-column type="selection" width="55" />
      <!-- <el-table-column label="库存ID" prop="repertoryId" />-->
      <el-table-column label="商品ID" prop="productId" />
      <el-table-column label="商品名称" prop="productName" />
      <el-table-column label="库存数量" prop="quantity" />
    </el-table>

    <br>
    <!--分页-->

      <!--分页-->
<!--      <div class="demo-pagination-block">-->
<!--        <el-pagination-->
<!--            v-model:current-page="page"-->
<!--            v-model:page-size="limit"-->
<!--            :page-sizes="[1, 2, 3, 5,10]"-->
<!--            :small="small"-->
<!--            :disabled="disable"-->
<!--            :background="background"-->
<!--            layout="total, sizes, prev, pager, next, jumper"-->
<!--            :total="count"-->
<!--            @size-change="handleSizeChange"-->
<!--            @current-change="handleCurrentChange"/>-->
<!--      </div>-->

    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="limit.page"
          :page-sizes="[1,2,3,5,10]"
          :page-size="limit.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count">
      </el-pagination>
    </div>


  </div>
</template>

<script>

import request from "@/netWork/request";
import login from "../../views/login/login";

export default {
  name: "selectRepertory",
  data() {
    return {
      // 表格数据
      RepertoryList: [],
      productName: "",
      count:0,
      //第几页 默认第一页
      page: 1,
      //一页显示多少 默认5
      limit: 5,

      disable:false,
      //大小
      small: false,
      //分页背景颜色
      background: true,

    }
  },
  // 界面初始化就要调用
  created() {
    this.getRepertory()
  },
  methods:{
    //获取表格数据
      getRepertory(flge){
        console.log("进来了查询全部的方法")
        this.$request({
        url:'selectRepertory',
        method:"get",
        params:{
          productName:this.productName,
          page:flge?1:this.page,
          limit:this.limit
        }
      },res=>{
        this.page=this.page;
        this.count = res.data.count;
        this.RepertoryList= res.data.t;
      },err=>{
          console.log(err);
          },8500)
    },

    // // 监听 pagesize 改变事件
    // handleSizeChange(newSize) {
    //   this.limit = newSize
    //   alert(newSize)
    //   // 重新发起请求 改变数据
    //   this.getRepertory()
    // },
    // // 监听 页码值 改变的事件
    // handleCurrentChange(newPage) {
    //   alert(newPage+"-")
    //   this.page = newPage;
    //   // 重新发起请求 改变数据
    //   this.getRepertory()
    // },

    handleSizeChange(val) {
      this.limit = val;  // 修改显示数
      this.getRepertory()
    },
    handleCurrentChange(val) {
      this.page = val;  // 更新当前的页
      this.getRepertory()
    },

    //根据采购Id进行审核
    purchase() {
      //提示语
      this.$confirm('确定生成采购计划？', '提示', {
        confirmButtonText: '确定',
        cancleButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$request({
          url: 'insertPurchasePlan',
          method: "get",
        }, res => {
          console.log("采购计划：" + res.data);
          if (res.data) {
            this.$message.success('生成成功')
          } else {
            this.$message.error('生成失败')
          }
        }, err => {
          console.log(err);
        },8500)
      })
    }
  }
}
</script>

<style scoped>
/**
搜索的div
 */
#searchDiv{
  width: 200px;
  margin-left: 2%;
}
/**
搜索按钮的div
 */
#searchBtn{
  width: 100px;
  position: relative;
  top: -40px;
  left: 190px;
}

/**
采购计划按钮的div
 */
#addPurchase{
  position: absolute;
  top: 175px;
  left: 700px;
}

#fenyeDiv{
  position: relative;
  left: -300px;
  top: 200px;
}
</style>